<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 消息管理 </el-breadcrumb-item>
                <el-breadcrumb-item>发送信息</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-form ref="form" :model="form" label-width="100px" :rules="rules">

                    <el-form-item label="发送人编号" prop="tid">
                        <el-input v-model="form.tid" disabled class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="发送人姓名" prop="name" >
                        <el-input v-model="form.name" disabled class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="消息类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择类型">
                            <el-option key="1" label="普通消息" value="00" ></el-option>
                            <el-option key="2" label="通知消息" value="01" ></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="接收人" prop="receivers">
                        <el-cascader
                        v-model="receivers"
                        :options="options"
                        placeholder="请选择接收人"
                        :props="props"
                        clearable
                        @change="setValue"
                       >
                        </el-cascader>
                    </el-form-item>

                     <el-form-item label="信息标题" prop="title" >
                        <el-input v-model="form.title" class="input_width"></el-input>
                    </el-form-item>

                    <el-form-item label="内容" prop="content">
                        <mavon-editor v-model="form.content" ref="md" @imgAdd="$imgAdd" @change="textChange" style="min-height: 600px"/>
                    </el-form-item>

                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-s-promotion">发送</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            props: { multiple: true },
            depts:[],
            positions:[],
            employees:[],
            employee:{},
            options:[],
            form: {
                tid:'',
                name: '',
                type:'',
                title:'',
                receivers:[],
                html:'',
                content: '',
                createdTime:'',
            },
            receivers:[],
             rules: {
                tid: [
                    { required: true, message: '请填入发件人编号', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请填入发件姓名', trigger: 'blur' },
                ],
                type: [
                    { required: true, message: '请选择信息类型', trigger: 'blur' },
                ],
                receivers: [
                    { required: true, message: '请选择收件人', trigger: 'blur' },
                ],
                title: [
                    { required: true, message: '请填入消息标题', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请填入消息内容', trigger: 'blur' },
                ],


            }
        };
    },
    components: {
            mavonEditor
    },
    created: function () {
        this.getEmployee();
        this.getEmployees();
        
        
    },
    methods: {

        setValue(val){
            console.log(val);
            let r=[]
            for(let i=0;i<val.length;i++){
                r.push(val[i][2])
            }
            this.form.receivers=r
            
        },

        // 把编译好的值存入form中
        textChange(value, render){
            this.form.html=render;
        },

        // 将图片上传到服务器，返回地址替换到md中
        $imgAdd(pos, $file){
            // var formdata = new FormData();
            // formdata.append('file', $file);
            // // 这里没有服务器供大家尝试，可将下面上传接口替换为你自己的服务器接口
            // this.$axios({
            //     url: '/images',
            //     method: 'post',
            //     data: formdata,
            //     headers: { 'Content-Type': 'multipart/form-data' },
            // }).then((url) => {
            //     this.$refs.md.$img2Url(pos, url);
            // })
        },
       
      
        goback() {
            this.$router.go(-1);
        },
      
         getEmployee(){
            this.employee=JSON.parse(window.sessionStorage.getItem("employee"));
            this.form.tid=this.employee.tellerId;
            this.form.name=this.employee.name;
        },

         async getDepts(){
            var d = await this.$http.get("/depts")
            if (d.code==200) {
                this.depts=d.data
               
                // console.log(this.depts);
            }
        },

        async getPositions(){
            this.getDepts();
            var d = await this.$http.get("/positions")
            if(d.code==200){
                this.positions = d.data
                // console.log(this.positions);
            }
        },

        async getEmployees(){
            this.getPositions();
            var d = await this.$http.get("/employees")
            if(d.code==200){
                this.employees=d.data
                // console.log(this.employees);
            }
            this.setOptions();
        },

        setOptions(){
            var op=[];
           
            for(let i=0;i<this.depts.length;i++){
                let item={};
                item.value=this.depts[i].id
                item.label=this.depts[i].name
                item.children=this.setpositions(this.depts[i].id);
                op.push(item)
            }
            let item={};
            item.value="01";
            item.label="领导";
            item.children=this.setpositions('01');
            op.push(item);
            this.options=op;
        },

        setpositions(did){
            let po=[];
            for(let i=0;i<this.positions.length;i++){
                let item={};
                if(this.positions[i].did==did){
                    item.value=this.positions[i].id
                    item.label=this.positions[i].name
                    item.children=this.setEmployees(this.positions[i].id);
                    
                    po.push(item);
                }
            }
            // console.log(po);
            return po;
        },

        
        setEmployees(pid){
            var em=[];
           
            for(let i=0;i<this.employees.length;i++){
                let item={};
                if (this.employees[i].pid==pid && this.employees[i].id != this.employee.id) {
                    item.value=this.employees[i].tellerId;
                    item.label=this.employees[i].name;
                    em.push(item)
                }
            }
            // console.log(em);
            return em;
        },

         onSubmit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {

                    var d = await this.$http.post('/msg', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                        this.reload();
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },


    }
};
</script>
<style scoped>
.input_width{
    width: 300px;
}
</style>